<template>
  <div class="quill-editor">
    <el-upload
      style="display: none"
      class="avatar-uploader"
      :auto-upload="true"
      :http-request="(param)=>uploadFile(param,'logo')"
      :show-file-list="false"
      action="string"
    >
    </el-upload>

    <quill-editor
      v-model="content"
      :content="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
      ref="QuillEditor">
    </quill-editor>
  </div>

</template>

<script>
  import {upload} from '@/api/api.js'
  import {Quill} from 'vue-quill-editor'
  import {ImageDrop} from 'quill-image-drop-module'
  import ImageResize from 'quill-image-resize-module'
  Quill.register('modules/imageDrop', ImageDrop)
  Quill.register('modules/imageResize', ImageResize)

  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    // [{ 'header': 1 }, { 'header': 2 }],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],
    // [{ 'indent': '-1' }, { 'indent': '+1' }],
    // [{ 'direction': 'rtl' }],
    [{ 'size': ['small', false, 'large', 'huge'] }],
    // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ 'font': [] }],
    [{ 'color': [] }, { 'background': [] }],
    [{ 'align': [] }],
    // ['clean'],
    ['image']
    // ['link', 'image', 'video']
  ]
  export default {
    data() {
      return {
        name: 'register-modules-example',
        content: ``,
        editorOption: {
          modules: {
            history: {
              delay: 1000,
              maxStack: 50,
              userOnly: false
            },
            toolbar: {
              container: toolbarOptions,
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 调用iview图片上传
                    document.querySelector('.avatar-uploader .el-upload').click()
                    console.log(value, 1231)
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            },
            imageDrop: true,
            imageResize: {
              displayStyles: {
                backgroundColor: 'black',
                border: 'none',
                color: 'white'
              },
              modules: ['Resize', 'DisplaySize', 'Toolbar']
            }
          }
        },

      }
    },
    methods: {
      open(row){
        this.content = row ? row.content : "";
      },
      //失去焦点事件
      onEditorBlur(editor) {
        // console.log('editor blur!', editor)
      },
      //获得焦点事件
      onEditorFocus(editor) {
        // console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        // console.log('editor ready!', editor)
      },
      //内容改变事件
      onEditorChange(){
        this.$emit("editorValChang",this.content)
      },
      //文件上传
      uploadFile(param, key1) {
        let _this = this
        const formData = new FormData()
        formData.append('file', param.file)
        const fileName = param.file.name
        const lastNum = parseInt(fileName.lastIndexOf('.')) + 1
        const endName = fileName.substring(lastNum).toLowerCase()
        if (endName != 'jpg' && endName != 'png' && endName != 'bmp') {
          this.$message.error('图片格式错误，只支持jpg、png、bmp格式')
          return
        }
        let quill = this.$refs.QuillEditor.quill
        upload(formData).then(res => {
          if (res.code == 200) {
            const data = res.data
            console.log(data)
            let length = quill.getSelection().index
            quill.insertEmbed(length, 'image', data.url)
            quill.setSelection(length + 1)
          }
        }).catch(response => {
          param.onError()
        })
      },
    }
  }
</script>
